<template>
  <div>
    <h3>当前最新的 count 值为: {{ count }}</h3>
    <button @click="sub">-1</button>
    <button @click="subN(3)">-N</button>
    <button @click="subAsync">-1 Async</button>
    <button @click="subNAsync(5)">-N Async</button>

    <h3>{{showNum}}</h3>

  </div>
</template>

<script>
// 从 vuex 中按需导入 mapState 函数
import {
  mapState,
  mapMutations,
  mapActions,
  mapGetters
} from 'vuex'

export default {
  data() {
    return {}
  },
  computed: {
    // 将 state 中的数据映射为一个 computed 计算属性,并用展开运算符展开
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  methods: {
    // 将 mutation 中的函数映射为 methods 函数, 并用展开运算符展开
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync'])

    // btnhandle1() {
    //   this.sub()
    // },
    // btnhandle2() {
    //   this.subN(3)
    // }
  }
}
</script>

<style scoped>
</style>
